import React from 'react';
import styled from '@emotion/styled';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as modalActions from '../store/actions/modal.actions';

const ModalDemo = ({ showStatus, show, hide, show_async }) => {
  return (
    <div>
      <button onClick={show}>显示</button>
      <button onClick={hide}>隐藏</button>
      <Content showStatus={showStatus}>{showStatus + ''}</Content>
    </div>
  );
};

const mapStateToProps = state => ({
  showStatus: state.modal.show
});

const mapDispatchToProps = dispatch => bindActionCreators(modalActions, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(ModalDemo);

const Content = styled.div`
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -100px;
  background: skyblue;
  display: ${props => (props.showStatus ? 'block' : 'none')};
`;
